<template>
  <el-dialog :title="`${form.courseId ? '修改' : '添加'}抽检流程`" :visible.sync="show" :close-on-click-modal="false" :show-close="!btnLoading" width="500px" @closed="$refs.form.resetFields()">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item prop="courseId" class="hide" />
      <el-form-item label="上级" prop="parentId" :class="{ hide: !showParentName }">{{ showParentName }}</el-form-item>
      <el-form-item label="编码" prop="code"><el-input v-model.trim="form.code" placeholder="请输入编码" :maxlength="50" /></el-form-item>
      <el-form-item label="名称" prop="courseName"><el-input v-model.trim="form.courseName" placeholder="请输入名称" :maxlength="255" /></el-form-item>
      <el-form-item label="类型" prop="courseType">
        <el-select v-model="form.courseType" placeholder="请选择" default-first-option filterable style="width: 100%">
          <el-option v-for="dict in cqRdcCourseTypes" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" placeholder="请输入内容" :maxlength="255" /></el-form-item>
      <el-form-item label="排序" prop="seq"><el-input-number v-model="form.seq" :min="0" :max="1e8" :precision="0" controls-position="right" /></el-form-item>
      <el-form-item label="是否启用" prop="isEnable"><el-switch v-model="form.isEnable" /></el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="btnSubmit">确 定</el-button>
      <el-button :disabled="btnLoading" @click="show = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 添加或修改其他抽检流程
import { nameRule } from '@/utils/validate'
import { editFormMixin } from '@/utils/mixin'
import { cqRdcCourseTypes } from '@/utils/baseData'
import { addRdcCourse, updateRdcCourse } from '@/api/qualityManage/cq'
export default {
  mixins: [editFormMixin],
  data() {
    return {
      cqRdcCourseTypes,
      primaryKey: 'courseId',
      addApi: addRdcCourse,
      updateApi: updateRdcCourse,
      form: {
        courseId: '',
        parentId: '',
        code: '',
        courseName: '',
        courseType: '',
        remark: '',
        seq: 0,
        isEnable: true
      },
      rules: {
        code: [{ required: true, message: '请输入编码' }, nameRule],
        courseName: [{ required: true, message: '请输入名称' }, nameRule],
        courseType: [{ required: true, message: '请选择类型' }]
      },
      rdcCourseList: [] // 抽检流程列表
    }
  },
  computed: {
    showParentName() {
      const val = this.form.parentId
      if (!val) return ''
      const item = this.rdcCourseList.find(i => i.courseId === val)
      if (!item) return ''
      return `${item.code} - ${item.courseName}`
    }
  },
  methods: {
    opened(item, { rdcCourseList }) {
      this.rdcCourseList = rdcCourseList
    }
  }
}
</script>
